<template>
	<view class="container">
		<view class="calendar-wrapper">
			<uni-calendar  :insert="true" :start-date="startDate" :end-date="endDate"
				:disabledDay="disabledDay" :selected="selected" @change="dateChange" />
		</view>
		
		<view class="form" v-for="(item, index) in dateCourseTimeInfo" :key="index">
			<view class="teacher-info flex-y-center">
				<image src="../../static/images/default-avatar.png" v-if="!item.teacherInfo.sysUser.avatar" class="avatar" mode=""></image>
				<image :src="item.teacherInfo.sysUser.avatar | formatFile" class="avatar" mode="" v-else></image>
				
				<text>{{item.teacherInfo.sysUser.nickName}}</text>
			</view>
			<view class="form-item">
				<view class="label">预约课程 <text style="color:#5d7eca">{{item.courseTimes.filter(a => a.status != 2).length || 0}}</text>/{{item.totalLessonNum || 0}}</view>
				<view class="content">
					<text class="picker-placeholder">已消课程<text style="color:#F9832C;"> {{item.cancelLessonNum}} </text>节</text>
				</view>
			</view>
			<view class="form-item">
				<view class="label">会议软件</view>
				<view class="content">{{item.teacherInfo.meetingType ? item.teacherInfo.meetingType : '暂无'}}</view>
			</view>
			<view class="form-item">
				<view class="label">会议号</view>
				<view class="content">
					<text>{{item.teacherInfo.meetingCode ? item.teacherInfo.meetingCode : '暂无'}}</text>
					<image src="../../static/images/icon-copy.png" class="icon-copy" mode="" v-if="item.teacherInfo.meetingCode" @tap="copy(item.teacherInfo.meetingCode)"></image>
				</view>
			</view>
			<view class="form-item" v-for="(time, i) in item.courseTimes" :key="time.uctId">
				<view class="label">{{time.courseTime.startTime}}~{{time.courseTime.endTime}}</view>
				<view class="content">
					<view class="handle-btn leave-btn" @tap="showLeaveModal(time.uctId)" v-if="time.status == 0">请假</view>
					<view class="handle-btn clear-btn" @tap="showClearModal(time.uctId)" v-if="time.status == 0">消课</view>
					<view class="handle-btn" v-if="time.status == 1">已消课</view>
					<view class="handle-btn" v-if="time.status == 2">已请假</view>
				</view>
			</view>
		</view>
		<my-empty :isShow="!dateCourseTimeInfo.length && isQuery" emptyText="暂无课程安排"></my-empty>
		
		<my-modal ref="modal"></my-modal>
	</view>
</template>

<script>
	import { getCourseDate, getCourseTimeInfo, cancelLesson, leaveLesson  } from '@/api/user.js'
	export default {
		data() {
			return {
				chooseDate: '',
				startDate: '',
				endDate: '',
				selected: [], // 选择过的日期
				disabledDay: [], // 禁用的日期
				dateCourseTimeInfo: [],// 对应日期的课时信息
				isQuery: false
			};
		},
		onLoad(){
			this.init()
		},
		onShow(){
			this.getCourseDate()
		},
		methods:{
			init() {
				// 默认可以查看所有
				// const startDate = this.dayjs().add(1, 'day');
				// this.startDate = this.dayjs(startDate).format("YYYY-MM-DD");
				// const endDate = this.dayjs().add(180, 'day')
				// this.endDate = this.dayjs(endDate).format("YYYY-MM-DD");
			},
			getCourseDate(){
				getCourseDate().then(res => {
					this.selected = res.data.map(item => {
						return {date: item.chooseDate}
					})
					
				})
			},
			dateChange(e){
				this.chooseDate = e.fulldate;
				this.getCourseTimeInfo()
			},
			getCourseTimeInfo(){
				this.isQuery = false
				getCourseTimeInfo(this.chooseDate).then(res => {
					res.data.forEach(item => {
						item.courseTimes.forEach(time => {
							time.courseTime.startTime = time.courseTime.startTime.substr(0, time.courseTime.startTime.length - 3)
							time.courseTime.endTime = time.courseTime.endTime.substr(0, time.courseTime.endTime.length - 3) 
						})
					})
					this.dateCourseTimeInfo = res.data
				}).finally(() => {
					this.isQuery = true
				})
			},
			copy(data){
				uni.setClipboardData({
					data,
					success: () => {
						this.toast('复制成功')
					}
				})
			},
			showLeaveModal(uctId){
				this.$refs.modal.open({
					content: '是否确认请假？',
					success: () => {
						leaveLesson(uctId).then(res => {
							this.toast('请假成功');
							this.getCourseTimeInfo()
						})
					}
				})
			},
			showClearModal(uctId){
				this.$refs.modal.open({
					content: '是否确认消课？',
					success: () => {
						cancelLesson(uctId).then(res => {
							this.toast('消课成功');
							this.getCourseTimeInfo()
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.container{
		background: #F3F3F3;
		padding-top: 1rpx;
	}
	
	.calendar-wrapper {
		margin: 30rpx;
	}
	
	.form{
		margin-top: 30rpx;
			
		.teacher-info{
			padding: 30rpx;
			font-size: 32rpx;
			font-weight: bold;
			color: #333333;
			
				.avatar{
					width: 92rpx;
					height: 92rpx;
					margin-right: 30rpx;
					border-radius: 50%;
				}
		}
		
		.icon-copy{
			width: 40rpx;
			height: 40rpx;
			margin-left: 20rpx;
		}
		
		.handle-btn{
			display: flex;
			justify-content: center;
			align-items: center;
			width: 168rpx;
			height: 58rpx;
			background: #F7F8F9;
			border-radius: 29rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
			margin-left: 10rpx;
		}
		
		.leave-btn{
			background: #EC1328;
			color:#fff;
		}
		
		.clear-btn{
			background-color: $theme-color;
			color:#fff;
		}
	}
</style>
